<template>
  <div>
    <mt-header title="登录" class="d1">
      <mt-button icon="back" slot="left" class="d2" @click="getme"></mt-button>
      <router-link to="/register" slot="right">新用户</router-link>
    </mt-header>
    <div id="sam">
      <img src="../assets/samzc.jpg" alt="" />
    </div>

    <!-- 输入框 -->
    <mt-field
      type="text"
      placeholder="请输入手机号码"
      label="手机号:"
      disableClear
      v-model="phone"
      :state="phoneState"
      @blur.native.capture="checkphone"
    ></mt-field>
    <mt-field
      type="password"
      placeholder="请输入密码"
      label="密码:"
      disableClear
      v-model="pwd"
      :state="pwdState"
      @blur.native.capture="checkpwd"
    ></mt-field>
    <mt-button
      type="primary"
      size="large"
      style="margin-top: 40px"
      @click="samForm"
      >安全登录</mt-button
    >
    <div id="samhy">
      还不是山姆会员? &nbsp; 成为会员, &nbsp;<a href="#">购买会籍></a>
    </div>
  </div>
</template>
<script>
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {
      phone: "",
      phoneState: "",
      pwd: "",
      pwdState: "",
      mcell:''
    };
  },
  methods: {
    checkphone() {
      let reg = /^1[3-9]\d{9}$/;
      if (reg.test(this.phone)) {
        this.phoneState = "success";
        return true;
      } else {
        this.phoneState = "error";
        return false;
      }
    },
    checkpwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.pwd)) {
        this.pwdState = "success";
        return true;
      } else {
        this.pwdState = "error";
        return false;
      }
    },
    samForm() {
      if (this.checkphone() && this.checkpwd()) {
        console.log("验证成功");
        this.axios
          .post("/user/login", `uphone=${this.phone}&upassword=${this.pwd}`)
          .then((res) => {
            console.log(res);
            this.mcell=res.data.data
            if (res.data.code == 200) {
              // this.$toast('登录成功')
              MessageBox.alert("登录成功").then(function () {
                window.location.href = "/mymessage";
              });
              this.$store.commit("loginis", this.phone);
              if(this.mcell){
                this.$store.commit('loginiy',this.mcell)
              }
              
            }else if(res.data.code == 201){
              MessageBox.alert("此用户不存在,请先注册")
            }
          });
      }
    },
    getme() {
      this.$router.push("/mymessage");
    },
  },
};
</script>
<style scoped>
.d1 {
  background-color: #fff !important;
  color: black !important;
  font-size: 16px;
}
#sam img {
  width: 80vw;
  position: relative;
  left: 10vw;
}
#samhy {
  font-size: 15px;
  color: #999;
  margin-top: 27vh;
  text-align: center;
}
#samhy a {
  color: blue;
}
</style>
